<script setup lang="ts">

const login = () => {
  uni.navigateTo({
    url: '/pages/login/login',
  });
};




const info = [
  {
    one: '性别',
    two: '男',
  },
  {
    one: '班级',
    two: '20软件1班',
  },
  {
    one: '学院',
    two: '智能制造学院',
  },
  {
    one: '角色',
    two: '学生',
  },
  {
    one: '学号',
    two: '20001314',
  },
  {
    one: '班主任',
    two: '宋海生',
  },
];







</script>

<template>
  <view class="container">
    <view class="header">
      <image src="/static/images/man.svg" mode=""></image>
      <view class="">
        <view style="font-size: 50rpx; color: #ffffff">聂会民</view>
        <view class="" style="color: #ffffff">20软件一班</view>
      </view>
      <image src="/static/images/edit.svg" mode="" class="edit"></image>
    </view>
    <view class="card">
      <button @click="login" plain="true">去登录</button>
    </view>
    <view class="body">
      <view class="itemList" v-for="item in info">
        <view>{{ item.one }}</view>
        <view>{{ item.two }}</view>
      </view>
    </view>
    <!-- <view class="footer">
      <navigator :url="'/pages/index/index'" style="color: #596d96">返回首页</navigator>
      <view style="color: #a7a7a7">Copyright © 2022-2022 艾学习.</view>
    </view> -->
  </view>
</template>
<style scoped lang="scss">
.container {
  width: 100%;
  height: 100vh;
  background-color: #f6f6f6;

  .header {
    width: 100%;
    height: 350rpx;
    background-color: $bgcolor;
    padding: 0 5vw;
    @include flex(flex-start);

    image {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      margin-right: 35rpx;
    }

    .edit {
      position: absolute;
      right: 30vw;
      width: 60rpx;
      height: 60rpx;
    }
  }

  .card {
    height: 180rpx;
    width: 90vw;
    margin: auto;
    border-radius: 20rpx;
    margin-top: -45rpx;
    margin-bottom: 35rpx;
    background-color: #ffffff;

    button {
      border: none;
      line-height: 180rpx;
      height: 180rpx;
      width: 100%;
    }
  }

  .body {
    margin: auto;
    width: 90vw;
    border-radius: 20rpx;
    padding: 30rpx;
    background-color: #ffffff;

    .itemList {
      height: 100rpx;
      @include flex(space-between);
      border-bottom: 2rpx solid #f6f6f7;
    }
  }

  .footer {
    position: fixed;
    bottom: 100rpx;
    @include flex-column();
  }
}
</style>
